<template>
    <div>111{{ a1 }}22</div>
    <router-link to="/lesson2">lesson2</router-link>
    <div v-html="a1">
    </div>
    <p>
        <a v-bind:href="baidu">百度地址</a>&nbsp;&nbsp; 
        <a :href="baidu">百度地址</a>&nbsp;&nbsp; 
        <!-- :href=href -->
        <a :href @click.prevent="countpp">百度地址</a>
    </p>
    <input type="text" :disabled v-model="a1" />
    <input type="text" :readonly="disabled" v-model="a1" />
    <input type="text" v-model="a1" /><br />
    1<input type="checkbox" />2<input type="checkbox" />
    <button v-on:click="countpp">{{ count }}</button>
    <button @click="countpp">{{ count }}</button>
    <hr />
    <h1>{{ obj.name }}</h1>
</template>
<script>
export default {
    name: 'lesson1',
    data() {
        return {
            a1: 'hello world',
            baidu:'https://www.baidu.com',
            href: 'https://www.baidu.com',
            disabled: false,
            count: 0,
            obj: {"name": "zhangsan", "age": 18},
            state: 0,
        }
    },
    methods: {
        countpp() {
            console.log("点击了");
            if (this.state == 0) {
                    console.info("触发了真是逻辑")
                    this.state = 1;
                    () => {this.count++;}
                    
            } 
            setTimeout(() => {
                this.state = 0;
            }, 1500);
        }
    },
    mounted() {

        let newobj = {"name": "lisi", "age": 19}
        // debugger;
        this.obj = newobj;
  
        console.log(this.obj.name);
        console.log(this.obj  == newobj); //  false
    }
}
</script>
<style scoped>

</style>